<template>
  <div class="labelTree">
    <el-tree
      :render-content="renderContent"
      :icon-class="'none'"
      :data="treeData"
      :default-expand-all="true"
      :props="defaultProps"
      :expand-on-click-node="false"
    />
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'chidren',
        matchQuantity: 'matchQuantity',
        productTagName: 'productTagName'
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    renderContent(h, { node, data, store }) {
      console.log(node)
      console.log(data)
      if (node.level === 1) {
        return (
          <div class='treeItem' style=' background-color: #5E70FF;'>{data.productTagName} (共{data.matchQuantity}枚)</div>
        )
      } else if (node.level === 2) {
        return (
          <div class='treeItem' style='background-color: #34B89D;'>{data.productTagName} (共{data.matchQuantity}枚)</div>
        )
      } else if (node.level === 3) {
        return (
          <div class='treeItem' style='background-color: #FF773F;'>{data.productTagName} (共{data.matchQuantity}枚)</div>
        )
      } else {
        return (
          <div class='treeItem' style='background-color: #A9A9A9;'>{data.productTagName} (共{data.matchQuantity}枚)</div>
        )
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
